<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Работа с погодой</title>
</head>
<body>

<!-- Форма добавления погоды -->
<form id="addWeatherForm">
    <h1 id="addWeatherSuccess"></h1>
    <input type="number" id="regionId" placeholder="Идентификатор региона" required>
    <input type="number" id="temperature" placeholder="Температура, °C" required>
    <input type="number" id="humidity" placeholder="Влажность, %" required>
    <input type="number" id="windSpeed" placeholder="Скорость ветра, м/с" required>
    <input type="text" id="weatherCondition" placeholder="Состояние погоды" required>
    <input type="number" id="precipitationAmount" placeholder="Количество осадков, мм" required>
    <input type="datetime-local" id="measurementDateTime" placeholder="Дата и время измерения" required>
    <input type="text" id="weatherForecast" placeholder="Прогноз погоды (идентификаторы через запятую)" required>
    <button type="submit">Добавить погоду</button>
</form>

<!-- Форма получения погоды по идентификатору региона -->
<form id="getWeatherForm">
    <h1 id="getWeatherSuccess"></h1>
    <input type="number" id="getRegionId" placeholder="Идентификатор региона" required>
    <button type="submit">Получить погоду</button>
</form>

<!-- Форма редактирования погоды -->
<form id="editWeatherForm">
    <h1 id="editWeatherSuccess"></h1>
    <input type="number" id="editRegionId" placeholder="Идентификатор региона" required>
    <input type="text" id="editRegionName" placeholder="Новое название региона" required>
    <input type="number" id="editTemperature" placeholder="Новая температура, °C" required>
    <input type="number" id="editHumidity" placeholder="Новая влажность, %" required>
    <input type="number" id="editWindSpeed" placeholder="Скорость ветра, м/с" required>
    <input type="text" id="editWeatherCondition" placeholder="Новое состояние погоды" required>
    <input type="number" id="editPrecipitationAmount" placeholder="Новое количество осадков, мм" required>
    <input type="datetime-local" id="editMeasurementDateTime" placeholder="Новая дата и время измерения" required>
    <input type="text" id="editWeatherForecast" placeholder="Новый прогноз погоды (идентификаторы через запятую)" required>
    <button type="submit">Редактировать погоду</button>
</form>

<!-- Форма удаления погоды -->
<form id="deleteWeatherForm">
    <h1 id="deleteWeatherSuccess"></h1>
    <input type="number" id="deleteRegionId" placeholder="Идентификатор региона" required>
    <button type="submit">Удалить погоду</button>
</form>

<!-- Информация о погоде -->
<div id="weatherInfo">
    <h2>Информация о погоде:</h2>
    <!-- Здесь будет отображаться информация о погоде -->
</div>

<script>
    document.getElementById('addWeatherForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const regionId = document.getElementById('regionId').value;
        const temperature = document.getElementById('temperature').value;
        const humidity = document.getElementById('humidity').value;
        const windSpeed = document.getElementById('windSpeed').value;
        const weatherCondition = document.getElementById('weatherCondition').value;
        const precipitationAmount = document.getElementById('precipitationAmount').value;
        const measurementDateTime = document.getElementById('measurementDateTime').value;
        const weatherForecast = document.getElementById('weatherForecast').value.split(',').map(Number);

        const data = JSON.stringify({
            regionId: regionId,
            temperature: temperature,
            humidity: humidity,
            windSpeed: windSpeed,
            weatherCondition: weatherCondition,
            precipitationAmount: precipitationAmount,
            measurementDateTime: measurementDateTime,
            weatherForecast: weatherForecast
        });

        fetch('/region/weather', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: data
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("addWeatherSuccess").innerText = "Погода успешно добавлена!";
                    return response.json();
                } else {
                    document.getElementById("addWeatherSuccess").innerText = "Ошибка при добавлении погоды!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("addWeatherSuccess").innerText = "Ошибка при добавлении погоды!";
            });
    });

    document.getElementById('getWeatherForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const regionId = document.getElementById('getRegionId').value;
        fetch(`/region/weather/${regionId}`)
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                } else {
                    throw new Error('Ошибка при получении погоды!');
                }
            })
            .then(data => {
                document.getElementById("weatherInfo").innerHTML = `
                    <p>Идентификатор региона: ${data.regionId}</p>
                    <p>Температура: ${data.temperature} °C</p>
                    <p>Влажность: ${data.humidity} %</p>
                    <p>Скорость ветра: ${data.windSpeed} м/с</p>
                    <p>Состояние погоды: ${data.weatherCondition}</p>
                    <p>Количество осадков: ${data.precipitationAmount} мм</p>
                    <p>Дата и время измерения: ${data.measurementDateTime}</p>
                    <p>Прогноз погоды: ${data.weatherForecast.join(', ')}</p>
                `;
                document.getElementById("getWeatherSuccess").innerText = "Погода успешно получена!";
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("getWeatherSuccess").innerText = "Ошибка при получении погоды!";
            });
    });

        document.getElementById('editWeatherForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const editRegionId = document.getElementById('editRegionId').value;
        const editRegionName = document.getElementById('editRegionName').value;
        const editTemperature = document.getElementById('editTemperature').value;
        const editHumidity = document.getElementById('editHumidity').value;
        const editWindSpeed = document.getElementById('editWindSpeed').value;
        const editWeatherCondition = document.getElementById('editWeatherCondition').value;
        const editPrecipitationAmount = document.getElementById('editPrecipitationAmount').value;
        const editMeasurementDateTime = document.getElementById('editMeasurementDateTime').value;
        const editWeatherForecast = document.getElementById('editWeatherForecast').value.split(',').map(Number);

        const data = JSON.stringify({
            regionName: editRegionName,
            temperature: editTemperature,
            humidity: editHumidity,
            windSpeed: editWindSpeed,
            weatherCondition: editWeatherCondition,
            precipitationAmount: editPrecipitationAmount,
            measurementDateTime: editMeasurementDateTime,
            weatherForecast: editWeatherForecast
        });

        fetch(`/region/weather/${editRegionId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: data
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("editWeatherSuccess").innerText = "Погода успешно отредактирована!";
                    return response.json();
                } else {
                    document.getElementById("editWeatherSuccess").innerText = "Ошибка при редактировании погоды!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("editWeatherSuccess").innerText = "Ошибка при редактировании погоды!";
            });
    });

    document.getElementById('deleteWeatherForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const deleteRegionId = document.getElementById('deleteRegionId').value;
        fetch(`/region/weather/${deleteRegionId}`, {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'}
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("deleteWeatherSuccess").innerText = "Погода успешно удалена!";
                } else {
                    document.getElementById("deleteWeatherSuccess").innerText = "Ошибка при удалении погоды!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("deleteWeatherSuccess").innerText = "Ошибка при удалении погоды!";
            });
    });
</script>

</body>
</html>